<template>
	<div class="banner_container">
		<div class="banner">
			<el-carousel height="465px" class="carouselList" @click="toAdv">
				<el-carousel-item v-for="item in bannerList" :key="item.id">
					<img :src="item.appAdvertiseUrl" />
				</el-carousel-item>
			</el-carousel>
			<!-- positionFixed 固定定位  -->
			<ul class="bannerUl positionFixed">
				<li class="active">
					<router-link to="/home/bannerbottomrec">推荐</router-link>
				</li>
				<li class="">
					<router-link to="/home/bannerbottompag">作品</router-link>
				</li>
				<li class="">
					<router-link to="/">教程</router-link>
				</li>
				<li class="">
					<router-link to="/">专题</router-link>
				</li>
				<li class="">
					<router-link to="/">动态</router-link>
				</li>
				<li class="">
					<router-link to="/">关注</router-link>
				</li>
			</ul>
			<div class="bannerRight">
				<el-button text @click="centerDialogVisible = true"
					><svg
						t="1666080860484"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="3432"
						width="17"
						height="17"
					>
						<path
							d="M127.045251 235.759324c-62.631527 0-113.042268-52.447539-113.042267-117.625062S64.922924 0.509199 127.045251 0.509199c62.631527 0 113.042268 52.447539 113.042268 117.625063 0 64.668324-50.410741 117.115863-113.042268 117.625062zM127.045251 627.333665c-62.631527 0-113.042268-52.447539-113.042267-117.625062s50.91994-117.625062 113.042267-117.625062c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM127.045251 1018.908006c-62.631527 0-113.042268-52.447539-113.042267-117.625062 0-64.668324 50.91994-117.625062 113.042267-117.625062 62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 235.250124c-62.631527 0-113.042268-52.447539-113.042268-117.625062C398.957732 52.956738 449.877673 0 512 0c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 627.333665c-62.631527 0-113.042268-52.447539-113.042268-117.625062s50.91994-117.625062 113.042268-117.625062c62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM512 1018.908006c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.91994-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042268 117.625062s-50.410741 117.625062-113.042268 117.625062zM896.954749 240.342118c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.410741-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062zM896.954749 632.425659c-62.631527 0-113.042268-52.447539-113.042268-117.625062s50.410741-117.625062 113.042268-117.625062c62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062zM896.954749 1024c-62.631527 0-113.042268-52.447539-113.042268-117.625062 0-64.668324 50.410741-117.625062 113.042268-117.625062 62.631527 0 113.042268 52.447539 113.042267 117.625062s-50.410741 117.625062-113.042267 117.625062z"
							p-id="3433"
							data-spm-anchor-id="a313x.7781069.0.i0"
							class="selected"
							fill="#707070"
						></path>
					</svg>
					&nbsp;选择兴趣技能</el-button
				>
			</div>
		</div>
		<!-- 对话框 -->
		<el-dialog
			style="margin-top: 15vh"
			v-model="centerDialogVisible"
			width="1024px"
			align-center
			lock-scroll="false"
			@open="handleopen"
			@close="handleclose"
		>
			<div slot="title" class="dialog-header-title">
				<em class="title-text">选择我的兴趣技能</em>
				<span class="title-text">0&nbsp;/&nbsp;7</span>
				<div>例如舞蹈就选舞种</div>
			</div>
			<div>
				<div class="demo-input-suffix">
					<el-col :span="6">
						<el-input
							v-model="inp"
							class="w-50 m-2"
							placeholder="搜索兴趣技能"
							:prefix-icon="Search"
							@keydown.enter="handleKeySearch"
						/>
					</el-col>
					<el-button disabled="true">搜索</el-button>
				</div>
				<span>
					<span
						v-for="(item, index) in keySerachData"
						:key="index + Math.random()"
					>
						<el-badge value="×" style="margin-right: 10px">
							<el-button>{{ item }}</el-button>
						</el-badge>
					</span>
					<el-button v-if="keySerachData[0]" @click="clearSerachHis"
						>点击清除</el-button
					>
					<div
						v-if="keySerachData[0]"
						style="margin-top: 30px; font-size: 18px"
					>
						抱歉，没有网络接口，没有返回数据，886~~~
					</div>
				</span>
				<div class="box" v-if="!keySerachData[0]">
					<p>推荐兴趣技能</p>
					<div class="box-List" data-wheel="mywheel">
						<div
							data-wheel="mywheel"
							class="box-item"
							v-for="item in diaData"
							:key="item.id"
							@click="handleselect"
							:data-selectid="item.id"
						>
							<el-badge value="√" class="item" v-if="item.isSelected">
								<span
									style="width: 100%; padding-right: 0px"
									:data-selectid="item.id"
									>{{ item.name }}</span
								>
							</el-badge>
							<span
								style="width: 100%; padding-right: 0px"
								:data-selectid="item.id"
								v-else
								>{{ item.name }}</span
							>
						</div>
					</div>
					<br />
					<span>滚动加载更多...</span>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取消</el-button>
					<el-button type="warning" @click="handleConfirm">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue"
import { ElBadge } from "element-plus"
import { Search } from "@element-plus/icons-vue"
//引入请求函数
import { reqBanner } from "@/api/banner"
import router from "../../../router"
//引入仓库
import { userStore } from "@/stores/lxcStore"
import { truncate } from "lodash"

//初始轮播数据
let bannerList = ref<any>([])

//点击轮播图跳转到广告页面
const toAdv = () => {
	router.push({ name: "advertisement" })
}

//点击选择兴趣弹出对话框的数据
//拿到仓库对象
let lxcStore = userStore()
const name = ref("选择我的兴趣技能")
const centerDialogVisible = ref(false)
const inp = ref("")
let diaData = ref([])
const handleopen = () => {
	if (diaData.value[0]) return
	lxcStore.getInterest(0)
}

let flag = false
let payload = 0
window.addEventListener(
	"wheel",
	function (e) {
		let evt = window.event || e
		let wheel = evt.target.dataset.wheel
		if (wheel != "mywheel") return
		// evt.preventDefault()
		//在这里面做一个滚动到底自动加载事件
		// console.info(evt.deltaY, "向下滚动", evt.target.dataset.wheel)
		if (evt.deltaY > 0) {
			if (flag) return
			if (payload > 5) return
			lxcStore.getInterest(payload)
			payload += 1
			flag = true
			setTimeout(() => {
				flag = false
			}, 1000)
		}
	},
	{ passive: true }
)

const handleclose = () => {
	// payload = 0
}

watch(
	() => lxcStore.dialogData,
	() => {
		diaData.value = lxcStore.dialogData
	},
	{ deep: true }
)

const handleselect = () => {
	diaData.value.forEach((ele) => {
		if (ele.id == event.target.dataset.selectid) {
			ele.isSelected = !ele.isSelected
		}
	})
}

let keySerachData = ref([])
const handleKeySearch = () => {
	keySerachData.value.push(inp.value)
	inp.value = ""
}

const clearSerachHis = () => {
	keySerachData.value = []
}

const handleConfirm = () => {
	lxcStore.fixHomeVideoCardData()
	centerDialogVisible.value = false
	//修改一下卡片渲染的数据
	// lxcStore.state.videoCardData = ""

	// lxcStore.$patch((state) => {
	// 	state.videoCardData = []
	// })

	// let addfive = this.videoCardData.slice(0, 6)
	// let subfive = this.videoCardData.slice(6)
	// console.log("修改之前", this.videoCardData)
	// let newV = subfive.push(...addfive)
	// this.videoCardData = newV
	// console.log("修改之后", this.videoCardData)
	// this.videoCardData = []
}

// 挂载的时候获取数据
//获取banner数据的函数
const getBanner = async () => {
	let result = await reqBanner()
	bannerList.value = result
}
onMounted(() => {
	getBanner()
})
</script>

<style scoped>
/* .active {
	border-bottom: 3px solid;
} */
.router-link-active {
	color: red;
	font-size: 16px;
}
.demonstration {
	color: var(--el-text-color-secondary);
}

.banner_container {
	width: 100%;
	background: #fff;
	margin-top: 10px;
}

.banner {
	width: 1200px;
	height: 535px;
	margin: 0 auto;
	background: #ffffff;
}

.banner img {
	width: 1200px;
	height: 465px;
}
/**
.positionFixed {
    position: fixed;
    top: 0;
    z-index: 199;
    right: 0;
    left: 0;
}
**/

.carouselList {
	margin-top: 20px;
}

.bannerUl {
	display: flex;
	font-size: 16px;
	width: 545px;
	margin-left: 25%;
	float: left;
}

.bannerUl li {
	height: 66px;
	margin: 0 24px;
	width: 35px;
	line-height: 66px;
	text-align: center;
}

.bannerRight {
	float: right;
	line-height: 66px;
	height: 66px;
	margin-right: 10px;
}

.bannerRight svg {
	vertical-align: middle;
}

/deep/ .el-carousel__button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
.el-dialog {
	position: relative;
	border-radius: 2px;
	box-sizing: border-box;
}
.dialog-header-title {
	position: absolute;
	left: 0px;
	top: 0px;
	padding: 20px;
	padding-bottom: 10px;
	height: 40px;
}
.dialog-header-title div {
	color: #b1b5c1;
	font-size: 14px;
}
.demo-input-suffix {
	width: 100%;
	height: 40px;
	display: flex;
	margin: 18px 0;
}
.title-text {
	font-style: normal;
	font-size: 18px;
	margin-right: 10px;
}
.el-input {
	height: 40px;
}
.el-button {
	height: 40px;
	margin: 0px 10px;
}
.box p {
	margin: 8px 0 10px;
	color: #111;
	font-size: 14px;
}
.box-List {
	height: 200px;
	overflow: auto;
	padding-top: 10px;
}
.box-item {
	min-width: 100px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	border-radius: 4px;
	border: 1px solid #eaecf0;
	color: #111;
	background-color: #fff;
	cursor: pointer;
	margin: 0 22px 21px 0;
	display: inline-block;
	font-size: 12px;
	position: relative;
	box-sizing: border-box !important;
}
.item {
	display: flex;
	margin: 0 auto;
}
</style>
